
import QtQuick 2.8
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.12

Item {
    id: user
    // QML shadows aren't supported with software rendering.
    readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
    property bool isCurrent
    property string name
    property string userName
    property string avatarPath
    property string iconSource
    property real faceSize
    property real borderSize
    property string orientationUserlist     // vertical, horizontal.
    property string orientationUsername     // left, right.
    property bool constrainText
    property bool showUsername

    // Hook for id: newUserAvatar (login.qml).
    property alias font: username.font
    property bool isDefaultUser: avatarPath == config["path/login.icon.default"]

    implicitHeight: 92
    implicitWidth: 476

    width: implicitWidth
    height: implicitHeight

    //Signaux ENVOYES
    signal selectMe()
    signal move_next()
    signal move_prev()

    //Behavior on opacity { OpacityAnimator { duration: 100 } }
    //Behavior on faceSize { NumberAnimation { duration: 100 } }

    MouseArea {
        id: button
        readonly property color nonHoveredColor: '#f0eaf3fd'
        readonly property color hoveredColor: Qt.lighter(nonHoveredColor, 1.2)

        width: 476
        height: 92

        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true

        Rectangle {
            id: bg
            anchors.fill: parent
            width: button.width
            height: button.height

            color: button.nonHoveredColor
            radius: 24
        }

        onEntered: bg.color = button.hoveredColor
        onExited: bg.color = button.nonHoveredColor

        Item {
            anchors.fill: parent

            RowLayout {
                anchors.fill: parent
                spacing: 0

                Item {
                    Layout.alignment: Qt.AlignVCenter
                    Layout.fillWidth: false
                    Layout.fillHeight: false
                    Layout.preferredWidth: 76
                    Layout.preferredHeight: 60
                    Layout.leftMargin: 16
                    Layout.rightMargin: 14
                    Image {
                        id: avatar
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: 76
                        height: 60
                        source: user.avatarPath
                        visible: true
                        fillMode: Image.PreserveAspectCrop
                        Component.onCompleted: {
                            avatar.status != Image.Error 
                            && avatar.status != Image.Null 
                            || (avatar.source = user.iconSource);
                        }
                        layer.enabled: true
                        layer.effect: OpacityMask {
                            source: avatar
                            maskSource: roundMask
                        }
                    }
                    Rectangle {
                        id: roundMask
                        width: 76
                        height: 60
                        radius: 44
                        visible: false
                    }
                }

                Text {
                    id: username
                    Layout.alignment: Qt.AlignVCenter
                    Layout.fillWidth: true
                    horizontalAlignment: Qt.Left
                    text: user.name
                    color: conf("text.color.focus")
                    font.pointSize: 24
                    font.bold: false
                    font.italic: false
                    font.capitalization: Font.Capitalize
                    font.weight: Font.Light
                    Component.onCompleted: if (conf("text.font") != "") font.family = conf("text.font")
                }
            }
        }

        onClicked: user.selectMe()
    }


    Accessible.name: name
    Accessible.role: Accessible.Button
    function accessiblePressAction() { user.selectMe() }


    function getImplicitWidth() { 
        var count = faceSize + (borderSize*2);
        if (username.visible && orientationUserlist == "vertical") {
            count += (grid.columnSpacing + username.implicitWidth);
        }
        return Math.round(count);
    }

    function getImplicitHeight() { 
        var count = faceSize + (borderSize*2);
        if (username.visible && orientationUserlist == "horizontal") count += (grid.rowSpacing + username.implicitHeight);
        return Math.round(count);
    }

    // Conf
    function conf(key, section) {
        var sec = (section === undefined ? "userlist" : section);
        var val = config[sec + "/" + key];
        if (val === "true") {return true;}
        if (val === "false") {return false;}
        return val;
    }
}
